<template>
	<view>
		<uNavbar title="消息" leftIconColor="#211E38"></uNavbar>
		<view class="new_box mart flex_dq" data-url="/pagesMy/setting/notice" @click="allJump">
			<view class="notice">
				<image src="../../static/icon/i_news.png" mode=""></image>
				<text class="notice_txt"
					v-if="overallNews.is_all_read_number!=0">{{overallNews.is_all_read_number>99?'99+':overallNews.is_all_read_number}}</text>
			</view>
			<view class=" flex_Z">
				<text class="f36 c0 marb">公告</text>
				<text class="f28 c4">{{gonggao}}</text>
			</view>
		</view>
		<view class="new_box flex_dq" data-url="/pagesMy/setting/notification" @click="allJump">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"
					v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view>
			<view class=" flex_Z">
				<text class="f36 c0 marb">系统通知</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view>
		<!-- 		<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的群聊</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view>
		<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的好友</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view> -->
		<!-- <view class="light"></view> -->
	</view>
</template>

<style>
	page {
		background: #211E38;
	}
</style>
<script>
	import {messagesindex} from "../../api/setting.js"
	export default {
		data() {
			return {
				xiaoxi: '585',
				overallNews: [],
				content: "",
				gonggao: ''
			}
		},
		// onLoad() {
		// 	this.getoverallNews()
		// },
		onShow() {
			this.getoverallNews()
		},
		methods: {
			//统一跳转
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			getoverallNews() {
				messagesindex().then(res => {
					console.log(res);
					if (res.code == 1) {
						if(Number(res.data.message_number) > 0){
							uni.setTabBarBadge({
								index: 2,
								text: res.data.message_number
							})
						}else{
							uni.hideTabBarRedDot({
							  index: 2,
							})
						}
						this.overallNews = res.data
						if (res.data.new_notice) {
							this.gonggao = res.data.new_notice.title
						} else {
							this.gonggao = '暂无新公告'
						}
						if (res.data.new_message) {
							this.content = res.data.new_message.content
						} else {
							this.content = '暂无新通知'
						}
					}
				})
			}
		},
	}
</script>

<style scoped>
	.new_box {
		width: 100%;
	}

	.notice {
		position: relative;
	}

	.notice>image {
		width: 120rpx;
		height: 120rpx;
		margin: 0 22rpx;
	}

	.notice_txt {
		position: absolute;
		top: 4rpx;
		right: 16rpx;
		font-size: 24rpx;
		color: #ffffff;
		background: red;
		padding: 6rpx 16rpx;
		border-radius: 40rpx;
	}

	.mart {
		margin-top: 50rpx;
	}

	.marb {
		margin-bottom: 6rpx;
	}
	.light{
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: #ffffff60;
		box-shadow: 0px 0px 30px 30px rgba(255, 255, 255, 1);
		margin: 120rpx auto;
	}
	
	
	
</style>